<template>
	<article v-title="'收容所'">
		<ul v-if="list.length > 0">
			<li v-for="v in list">
				<div class="box">
					<div class="intro">
						<img :src="v.mdtp">
						<div>
							<h4>{{v.name}}</h4>
							<p><span>{{v.rcs}}</span>人去过</p>
							<p>{{getFlatternDistance(wd,jd, v.lanlng.split(",")[0], v.lanlng.split(",")[1]).toFixed(2)}}公里 宠物店</p>
							<p>{{v.dz}}</p>
							<p>联系人：{{v.lxrmc}}</p>
							<p>联系电话：{{v.dh}}</p>
						</div>
					</div>
					<div class="go" @click="go(v.lanlng, v.name, v.dz)">
						<img src="../../assets/img/quzheli.png">
						<p>去这里</p>
					</div>
				</div>
				<div class="time">营业时间：{{v.yysj}}</div>
			</li>
		</ul>
		<div v-else class="empty">
			<img src="../../assets/img/empty.png">
		</div>
	</article>
</template>

<script type="text/javascript">
	import { MessageBox, Indicator } from 'mint-ui'
	export default {
		data () {
			return {
				list: [],
				pageindex: 1,
				jd: '',
				wd: '',
				scrollBol: true
			}
		},
		created () {
			this.$store.state.wrap = false;
			this.$store.state.info = false;
			var self = this;
			this.getData();
			// setTimeout(function(){
			this.addr();
			// },2000)
			window.addEventListener('scroll', this.loadMore);
		},
		computed: {
			// apiBol () {
			// 	if (this.$store.state.apiBol) {
			// 		console.log('apiBol:' + this.$store.state.apiBol)
			// 		this.addr()
			// 	}
			// 	return this.$store.state.apiBol;
			// }
		},
		methods: {
			go (lanlng, name, address) {
				var latitude = lanlng.split(",")[0],
					longitude = lanlng.split(",")[1];
				// alert(latitude+","+ longitude + ',' + name + ',' + address)
				this.wx.openLocation({
					latitude: latitude*1, // 纬度，浮点数，范围为90 ~ -90
				    longitude: longitude*1, // 经度，浮点数，范围为180 ~ -180。
				    name: name, // 位置名
				    address: address, // 地址详情说明
				    scale: 1 // 地图缩放级别,整形值,范围从1~28。默认为最大
				})
			},
			loadMore () {
				if (!this.scrollBol) {
					this.$store.state.loading = false;
					return false
				}
				var self = this;
				if (document.body.scrollTop >= document.body.clientHeight - window.innerHeight) {
					this.$store.state.loading = true;
					if (!this.$store.state.isLoading) {
						this.$store.state.isLoading = true;
						this.pageindex ++;
						this.getData()
					}

				}
			},
			getData () {
				console.log(this.pageindex,this.jd,this.wd)
				this.axios.get(this.$store.state.hostname + 'cw/getcwmdlist.do',{
					pageindex: this.pageindex,
					jd: this.jd,
					md: this.wd
				}).then( res => {
					console.log(res)
					if (res.list.length < 10) {
						this.scrollBol = false;
					}
					if (this.pageindex > 1) {
						this.list = this.list.concat(res.list);
					}else{
						this.list = res.list;
					}
				})
			},
			// addr () {
			// 	var self = this;
			// 	var url = window.location.href.split("#")[0];
			// 	// url = "http://www.mengxsh.cc/xunchong/dist/index.html"
			// 	console.log(url)
			// 	this.http.get(this.$store.state.hostname + 'yh/getsign.do',{
			// 		params: {
			// 			date: new Date(),
			// 			url: url
			// 		}
			// 	}).then( res => {
			// 		console.log(res)
			// 		var res = res.data.data;
			// 	    Indicator.close();
			// 		this.wx.config({
			// 			appId: self.$store.state.appId,
			// 			timestamp: res.timestamp,
			// 			nonceStr: res.nonceStr,
			// 			signature: res.signature,
			// 			jsApiList: [
			// 				'getLocation',
			// 				'openLocation',
			// 			]
			// 		})

			// 		this.wx.ready(function(){
			// 			self.wx.getLocation({
			// 				type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
			// 			    success: function (res) {
			// 			        var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
			// 			        var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
			// 			        alert(latitude + "," + longitude + "," + speed + "," + accuracy);
			// 			        self.wd = latitude;
			// 			        self.jd = longitude;
			// 			        // console.log("plae---------")
			// 			        // console.log(res)
			// 			        // console.log(latitude, longitude)
			// 			    },
			// 			    fail: function (res) {
			// 			        alert(JSON.stringify(res))
			// 			    	console.log(res)
			// 			    }
			// 			})
			// 		})
			// 	})
			// },

			addr () {
				var self = this;
				this.wx.ready(function(){
					self.wx.getLocation({
						type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
					    success: function (res) {
					        var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
					        var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
					        self.wd = latitude;
					        self.jd = longitude;
					        // console.log("plae---------")
					        // console.log(res)
					        // console.log(latitude, longitude)
					    },
					    fail: function (res) {
					    	console.log(res)
					    }
					})
				})
			},
			Rad(d){
	           return d * Math.PI / 180.0;//经纬度转换成三角函数中度分表形式。
	        },
	        //计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
	        getFlatternDistance (lat1,lng1,lat2,lng2) {
	        	lat2 *= 1;
	        	lng2 *= 1;
	            var radLat1 = this.Rad(lat1);
	            var radLat2 = this.Rad(lat2);
	            var a = radLat1 - radLat2;
	            var b = this.Rad(lng1) - this.Rad(lng2);
	            var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
	            Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
	            s = s *6378.137 ;// EARTH_RADIUS;
	            s = Math.round(s * 10000) / 10000; //输出为公里
	            //s=s.toFixed(4);
	            return s;

	        }
		    // getFlatternDistance(lat1,lng1,lat2,lng2){
		    // 	lat2 *= 1;
		    // 	lng2 *= 1;
		    // 	console.log(lat1,lng1,lat2,lng2)
		    //     var f = this.Rad((lat1 + lat2)/2);
		    //     var g = this.Rad((lat1 - lat2)/2);
		    //     var l = this.Rad((lng1 - lng2)/2);

		    //     var sg = Math.sin(g);
		    //     var sl = Math.sin(l);
		    //     var sf = Math.sin(f);

		    //     var s,c,w,r,d,h1,h2;
		    //     var a = 6378137.0;
		    //     var fl = 1/298.257;

		    //     sg = sg*sg;
		    //     sl = sl*sl;
		    //     sf = sf*sf;

		    //     s = sg*(1-sl) + (1-sf)*sl;
		    //     c = (1-sg)*(1-sl) + sf*sl;

		    //     w = Math.atan(Math.sqrt(s/c));
		    //     r = Math.sqrt(s*c)/w;
		    //     d = 2*w*a;
		    //     h1 = (3*r -1)/2/c;
		    //     h2 = (3*r +1)/2/s;

		    //     console.log(d*(1 + fl*(h1*sf*(1-sg) - h2*(1-sf)*sg)))
		    //     return d*(1 + fl*(h1*sf*(1-sg) - h2*(1-sf)*sg));
		    // },
		    // Rad(d){
		    //    return d * Math.PI / 180.0;//经纬度转换成三角函数中度分表形式。
		    // }
		}
	}
</script>

<style lang="less" scoped>
	article {
		.empty {
			margin-top: 0.2rem;
			border-top:1px solid #eee;
			img {
				width: 0.7rem;
				display: block;
				margin:0.2rem auto;
			}
		}
		li {
			padding:0.2rem;
			.box {
					display:flex;
			  	align-items:center;
			  	justify-content: space-between;
				.intro {
					width: 90%;
					display:flex;
					align-items:center;
					justify-content: space-between;
					div {
						width: 70%;
						// margin-left:0.1rem;
						// float: right;
					}
					// >* {
					// 	display: inline-block;
					// 	vertical-align: middle;
					// }
					img {
						width: 25%;
				  		// width:0.8rem;
							// float: left;
				  	}
					h4 {
						line-height: 0.3rem;
						margin-bottom:0.1rem;
					}
					p {
						line-height: 0.2rem;
						font-size: 0.14rem;
						span {
							color: #f00;
							font-size: 0.16rem;
							font-weight: bold;
						}
					}
				}

			  	.go {
						width: 10%;
			  		text-align: center;
			  		color:#8BC7D1;
			  		font-size: 0.14rem;
			  		line-height: 0.2rem;
			  		img {
			  			width: 0.3rem;
			  		}
			  	}
			}
			.time {
				background: #f0f0f0;
				position: relative;
				// padding:0.05rem 0;
				height:0.2rem;
				line-height: 0.2rem;
				text-indent: 1em;
				color: #aaa;
				font-size: 0.12rem;
				margin-top:0.1rem;

				&:after {
					content: '';
					position: absolute;
					width: 200%;
					height: 200%;
					top:0;left:0;
					border:1px solid #ccc;
					transform-origin: 0 0;    //设置元素的基点为0 0
					transform: scale(0.5);
				}
			}
		}
	}
</style>
